<template>
  <div class="box">
    <div class="grid">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>  
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
// @function randomColor() {
//   @return rgb(
//     random(255), 
//     random(255), 
//     random(255)
//   );
// }
// $random-color: rgb(random(255), random(255), random(255));
 
.box {
  padding: 20px;
  .grid {
    background-color: pink;
    display: inline-grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    // .item {
    //   background-color: lightgoldenrodyellow;
    // }
    @for $i from 1 through 9 {
    .item:nth-child(#{$i}) {
        background-color: rgb(random(255), random(255), random(255));
      }
    }
  }
}
</style>